extends /default.pug

block view
  .animated.fadeIn
    .row
      .col-sm-6
        .card
          .card-header
            strong Credit Card
            small Form
          .card-body
            .row
              .col-sm-12
                .form-group
                  label(for='name') Name
                  input#name.form-control(type='text', placeholder='Enter your name')
            // /.row
            .row
              .col-sm-12
                .form-group
                  label(for='ccnumber') Credit Card Number
                  input#ccnumber.form-control(type='text', placeholder='0000 0000 0000 0000')
            // /.row
            .row
              .form-group.col-sm-4
                label(for='ccmonth') Month
                select#ccmonth.form-control
                  option 1
                  option 2
                  option 3
                  option 4
                  option 5
                  option 6
                  option 7
                  option 8
                  option 9
                  option 10
                  option 11
                  option 12
              .form-group.col-sm-4
                label(for='ccyear') Year
                select#ccyear.form-control
                  option 2014
                  option 2015
                  option 2016
                  option 2017
                  option 2018
                  option 2019
                  option 2020
                  option 2021
                  option 2022
                  option 2023
                  option 2024
                  option 2025
              .col-sm-4
                .form-group
                  label(for='cvv') CVV/CVC
                  input#cvv.form-control(type='text', placeholder='123')
            // /.row
      // /.col
      .col-sm-6
        .card
          .card-header
            strong Company
            small Form
          .card-body
            .form-group
              label(for='company') Company
              input#company.form-control(type='text', placeholder='Enter your company name')
            .form-group
              label(for='vat') VAT
              input#vat.form-control(type='text', placeholder='PL1234567890')
            .form-group
              label(for='street') Street
              input#street.form-control(type='text', placeholder='Enter street name')
            .row
              .form-group.col-sm-8
                label(for='city') City
                input#city.form-control(type='text', placeholder='Enter your city')
              .form-group.col-sm-4
                label(for='postal-code') Postal Code
                input#postal-code.form-control(type='text', placeholder='Postal Code')
            // /.row
            .form-group
              label(for='country') Country
              input#country.form-control(type='text', placeholder='Country name')
      // /.col
    // /.row
    .row
      .col-md-6
        .card
          .card-header
            strong Basic Form
            |           Elements
          .card-body
            form.form-horizontal(action='', method='post', enctype='multipart/form-data')
              .form-group.row
                label.col-md-3.col-form-label Static
                .col-md-9
                  p.form-control-static Username
              .form-group.row
                label.col-md-3.col-form-label(for='text-input') Text Input
                .col-md-9
                  input#text-input.form-control(type='text', name='text-input', placeholder='Text')
                  span.help-block This is a help text
              .form-group.row
                label.col-md-3.col-form-label(for='email-input') Email Input
                .col-md-9
                  input#email-input.form-control(type='email', name='email-input', placeholder='Enter Email')
                  span.help-block Please enter your email
              .form-group.row
                label.col-md-3.col-form-label(for='password-input') Password
                .col-md-9
                  input#password-input.form-control(type='password', name='password-input', placeholder='Password')
                  span.help-block Please enter a complex password
              .form-group.row
                label.col-md-3.col-form-label(for='date-input') Date Input
                .col-md-9
                  input#date-input.form-control(type='date', name='date-input', placeholder='date')
                  span.help-block Please enter a valid date
              .form-group.row
                label.col-md-3.col-form-label(for='disabled-input') Disabled Input
                .col-md-9
                  input#disabled-input.form-control(type='text', name='disabled-input', placeholder='Disabled', disabled='')
              .form-group.row
                label.col-md-3.col-form-label(for='textarea-input') Textarea
                .col-md-9
                  textarea#textarea-input.form-control(name='textarea-input', rows='9', placeholder='Content..')
              .form-group.row
                label.col-md-3.col-form-label(for='select1') Select
                .col-md-9
                  select#select1.form-control(name='select1')
                    option(value='0') Please select
                    option(value='1') Option #1
                    option(value='2') Option #2
                    option(value='3') Option #3
              .form-group.row
                label.col-md-3.col-form-label(for='select2') Select Large
                .col-md-9
                  select#select2.form-control.form-control-lg(name='select2')
                    option(value='0') Please select
                    option(value='1') Option #1
                    option(value='2') Option #2
                    option(value='3') Option #3
              .form-group.row
                label.col-md-3.col-form-label(for='select3') Select Small
                .col-md-9
                  select#select3.form-control.form-control-sm(name='select3')
                    option(value='0') Please select
                    option(value='1') Option #1
                    option(value='2') Option #2
                    option(value='3') Option #3
              .form-group.row
                label.col-md-3.col-form-label(for='disabledSelect') Disabled Select
                .col-md-9
                  select#disabledSelect.form-control(disabled='')
                    option(value='0') Please select
                    option(value='1') Option #1
                    option(value='2') Option #2
                    option(value='3') Option #3
              .form-group.row
                label.col-md-3.col-form-label(for='multiple-select') Multiple select
                .col-md-9
                  select#multiple-select.form-control(name='multiple-select', size='5', multiple='')
                    option(value='1') Option #1
                    option(value='2') Option #2
                    option(value='3') Option #3
                    option(value='4') Option #4
                    option(value='5') Option #5
                    option(value='6') Option #6
                    option(value='7') Option #7
                    option(value='8') Option #8
                    option(value='9') Option #9
                    option(value='10') Option #10
              .form-group.row
                label.col-md-3.col-form-label Radios
                .col-md-9.col-form-label
                  .form-check
                    input#radio1.form-check-input(type='radio', value='radio1', name='radios')
                    label.form-check-label(for='radio1')
                      | Option 1
                  .form-check
                    input#radio2.form-check-input(type='radio', value='radio2', name='radios')
                    label.form-check-label(for='radio2')
                      | Option 2
                  .form-check
                    input#radio3.form-check-input(type='radio', value='radio2', name='radios')
                    label.form-check-label(for='radio3')
                      | Option 3
              .form-group.row
                label.col-md-3.col-form-label Inline Radios
                .col-md-9.col-form-label
                  .form-check.form-check-inline.mr-1
                    input#inline-radio1.form-check-input(type='radio', value='option1', name='inline-radios')
                    label.form-check-label(for='inline-radio1') One
                  .form-check.form-check-inline.mr-1
                    input#inline-radio2.form-check-input(type='radio', value='option2', name='inline-radios')
                    label.form-check-label(for='inline-radio2') Two
                  .form-check.form-check-inline.mr-1
                    input#inline-radio3.form-check-input(type='radio', value='option3', name='inline-radios')
                    label.form-check-label(for='inline-radio3') Three
              .form-group.row
                label.col-md-3.col-form-label Checkboxes
                .col-md-9.col-form-label
                  .form-check.checkbox
                    input#check1.form-check-input(type='checkbox', value='')
                    label.form-check-label(for='check1')
                      | Option 1
                  .form-check.checkbox
                    input#check2.form-check-input(type='checkbox', value='')
                    label.form-check-label(for='check2')
                      | Option 2
                  .form-check.checkbox
                    input#check3.form-check-input(type='checkbox', value='')
                    label.form-check-label(for='check3')
                      | Option 3
              .form-group.row
                label.col-md-3.col-form-label Inline Checkboxes
                .col-md-9.col-form-label
                  .form-check.form-check-inline.mr-1
                    input#inline-checkbox1.form-check-input(type='checkbox', value='check1')
                    label.form-check-label(for='inline-checkbox1') One
                  .form-check.form-check-inline.mr-1
                    input#inline-checkbox2.form-check-input(type='checkbox', value='check2')
                    label.form-check-label(for='inline-checkbox2') Two
                  .form-check.form-check-inline.mr-1
                    input#inline-checkbox3.form-check-input(type='checkbox', value='check3')
                    label.form-check-label(for='inline-checkbox3') Three
              .form-group.row
                label.col-md-3.col-form-label(for='file-input') File input
                .col-md-9
                  input#file-input(type='file', name='file-input')
              .form-group.row
                label.col-md-3.col-form-label(for='file-multiple-input') Multiple File input
                .col-md-9
                  input#file-multiple-input(type='file', name='file-multiple-input', multiple='')
          .card-footer
            button.btn.btn-sm.btn-primary(type='submit')
              i.fa.fa-dot-circle-o
              |  Submit
            button.btn.btn-sm.btn-danger(type='reset')
              i.fa.fa-ban
              |  Reset
        .card
          .card-header
            strong Inline
            |           Form
          .card-body
            form.form-inline(action='', method='post')
              .form-group
                label(for='exampleInputName2') Name
                input#exampleInputName2.form-control(type='text', placeholder='Jane Doe')
              .form-group
                label(for='exampleInputEmail2') Email
                input#exampleInputEmail2.form-control(type='email', placeholder='jane.doe@example.com')
          .card-footer
            button.btn.btn-sm.btn-primary(type='submit')
              i.fa.fa-dot-circle-o
              |  Submit
            button.btn.btn-sm.btn-danger(type='reset')
              i.fa.fa-ban
              |  Reset
      .col-md-6
        .card
          .card-header
            strong Horizontal
            |           Form
          .card-body
            form.form-horizontal(action='', method='post')
              .form-group.row
                label.col-md-3.col-form-label(for='hf-email') Email
                .col-md-9
                  input#hf-email.form-control(type='email', name='hf-email', placeholder='Enter Email..')
                  span.help-block Please enter your email
              .form-group.row
                label.col-md-3.col-form-label(for='hf-password') Password
                .col-md-9
                  input#hf-password.form-control(type='password', name='hf-password', placeholder='Enter Password..')
                  span.help-block Please enter your password
          .card-footer
            button.btn.btn-sm.btn-primary(type='submit')
              i.fa.fa-dot-circle-o
              |  Submit
            button.btn.btn-sm.btn-danger(type='reset')
              i.fa.fa-ban
              |  Reset
        .card
          .card-header
            strong Normal
            |           Form
          .card-body
            form(action='', method='post')
              .form-group
                label(for='nf-email') Email
                input#nf-email.form-control(type='email', name='nf-email', placeholder='Enter Email..')
                span.help-block Please enter your email
              .form-group
                label(for='nf-password') Password
                input#nf-password.form-control(type='password', name='nf-password', placeholder='Enter Password..')
                span.help-block Please enter your password
          .card-footer
            button.btn.btn-sm.btn-primary(type='submit')
              i.fa.fa-dot-circle-o
              |  Submit
            button.btn.btn-sm.btn-danger(type='reset')
              i.fa.fa-ban
              |  Reset
        .card
          .card-header
            | Input
            strong Grid
          .card-body
            form.form-horizontal(action='', method='post')
              .form-group.row
                .col-sm-3
                  input.form-control(type='text', placeholder='.col-sm-3')
              .form-group.row
                .col-sm-4
                  input.form-control(type='text', placeholder='.col-sm-4')
              .form-group.row
                .col-sm-5
                  input.form-control(type='text', placeholder='.col-sm-5')
              .form-group.row
                .col-sm-6
                  input.form-control(type='text', placeholder='.col-sm-6')
              .form-group.row
                .col-sm-7
                  input.form-control(type='text', placeholder='.col-sm-7')
              .form-group.row
                .col-sm-8
                  input.form-control(type='text', placeholder='.col-sm-8')
              .form-group.row
                .col-sm-9
                  input.form-control(type='text', placeholder='.col-sm-9')
              .form-group.row
                .col-sm-10
                  input.form-control(type='text', placeholder='.col-sm-10')
              .form-group.row
                .col-sm-11
                  input.form-control(type='text', placeholder='.col-sm-11')
              .form-group.row
                .col-sm-12
                  input.form-control(type='text', placeholder='.col-sm-12')
          .card-footer
            button.btn.btn-sm.btn-primary(type='submit')
              i.fa.fa-user
              |  Login
            button.btn.btn-sm.btn-danger(type='reset')
              i.fa.fa-ban
              |  Reset
        .card
          .card-header
            | Input
            strong Sizes
          .card-body
            form.form-horizontal(action='', method='post')
              .form-group.row
                label.col-sm-5.col-form-label(for='input-small') Small Input
                .col-sm-6
                  input#input-small.form-control.form-control-sm(type='text', name='input-small', placeholder='.form-control-sm')
              .form-group.row
                label.col-sm-5.col-form-label(for='input-normal') Normal Input
                .col-sm-6
                  input#input-normal.form-control(type='text', name='input-normal', placeholder='Normal')
              .form-group.row
                label.col-sm-5.col-form-label(for='input-large') Large Input
                .col-sm-6
                  input#input-large.form-control.form-control-lg(type='text', name='input-large', placeholder='.form-control-lg')
          .card-footer
            button.btn.btn-sm.btn-primary(type='submit')
              i.fa.fa-dot-circle-o
              |  Submit
            button.btn.btn-sm.btn-danger(type='reset')
              i.fa.fa-ban
              |  Reset
      // /.col
    // /.row
    .row
      .col-sm-6
        .card
          .card-header
            strong Validation states
            |           Form
          .card-body
            .form-group
              label.form-col-form-label(for='inputSuccess1') Input with success
              input#inputSuccess1.form-control.is-valid(type='text')
            .form-group
              label.form-col-form-label(for='inputError1') Input with error
              input#inputError1.form-control.is-invalid(type='text')
              .invalid-feedback
                | Please provide a valid informations.
      // /.col
      .col-sm-6
        .card
          .card-header
            strong Validation
            code was-validated
          .card-body.was-validated
            .form-group
              label.form-col-form-label(for='inputSuccess2') Input with success
              input#inputSuccess2.form-control.is-valid(type='text')
            .form-group
              label.form-col-form-label(for='inputError2') Input required
              input#inputError2.form-control.is-invalid(type='text', required='')
              .invalid-feedback
                | Please provide a valid informations.
      // /.col
    // /.row
    .row
      .col-sm-4
        .card
          .card-header
            strong Icon/Text
            |           Groups
          .card-body
            form.form-horizontal(action='', method='post')
              .form-group.row
                .col-md-12
                  .input-group
                    .input-group-prepend
                      span.input-group-text
                        i.fa.fa-user
                    input#input1-group1.form-control(type='text', name='input1-group1', placeholder='Username')
              .form-group.row
                .col-md-12
                  .input-group
                    input#input2-group1.form-control(type='email', name='input2-group1', placeholder='Email')
                    .input-group-append
                      span.input-group-text
                        i.fa.fa-envelope-o
              .form-group.row
                .col-md-12
                  .input-group
                    .input-group-prepend
                      span.input-group-text
                        i.fa.fa-euro
                    input#input3-group1.form-control(type='text', name='input3-group1', placeholder='..')
                    .input-group-append
                      span.input-group-text .00
          .card-footer
            button.btn.btn-sm.btn-success(type='submit')
              i.fa.fa-dot-circle-o
              |  Submit
            button.btn.btn-sm.btn-danger(type='reset')
              i.fa.fa-ban
              |  Reset
      .col-sm-4
        .card
          .card-header
            strong Buttons
            |           Groups
          .card-body
            form.form-horizontal(action='', method='post')
              .form-group.row
                .col-md-12
                  .input-group
                    span.input-group-prepend
                      button.btn.btn-primary(type='button')
                        i.fa.fa-search
                        |  Search
                    input#input1-group2.form-control(type='text', name='input1-group2', placeholder='Username')
              .form-group.row
                .col-md-12
                  .input-group
                    input#input2-group2.form-control(type='email', name='input2-group2', placeholder='Email')
                    span.input-group-append
                      button.btn.btn-primary(type='button') Submit
              .form-group.row
                .col-md-12
                  .input-group
                    span.input-group-prepend
                      button.btn.btn-primary(type='button')
                        i.fa.fa-facebook
                    input#input3-group2.form-control(type='text', name='input3-group2', placeholder='Search')
                    span.input-group-append
                      button.btn.btn-primary(type='button')
                        i.fa.fa-twitter
          .card-footer
            button.btn.btn-sm.btn-success(type='submit')
              i.fa.fa-dot-circle-o
              |  Submit
            button.btn.btn-sm.btn-danger(type='reset')
              i.fa.fa-ban
              |  Reset
      .col-sm-4
        .card
          .card-header
            strong Dropdowns
            |           Groups
          .card-body
            form.form-horizontal(action='', method='post')
              .form-group.row
                .col-md-12
                  .input-group
                    .input-group-prepend
                      button.btn.btn-primary.dropdown-toggle(type='button', data-toggle='dropdown')
                        | Action
                        span.caret
                      .dropdown-menu
                        a.dropdown-item(href='#') Action
                        a.dropdown-item(href='#') Another action
                        a.dropdown-item(href='#') Something else here
                        .dropdown-divider(role='separator')
                        a.dropdown-item(href='#') Separated link
                    input#input1-group3.form-control(type='text', name='input1-group3', placeholder='Username')
              .form-group.row
                .col-md-12
                  .input-group
                    input#input2-group3.form-control(type='email', name='input2-group3', placeholder='Email')
                    .input-group-append
                      button.btn.btn-primary.dropdown-toggle(type='button', data-toggle='dropdown')
                        | Action
                        span.caret
                      .dropdown-menu.dropdown-menu-right
                        a.dropdown-item(href='#') Action
                        a.dropdown-item(href='#') Another action
                        a.dropdown-item(href='#') Something else here
                        .dropdown-divider(role='separator')
                        a.dropdown-item(href='#') Separated link
              .row
                .col-md-12
                  .input-group
                    .input-group-prepend
                      button.btn.btn-primary(type='button') Action
                      button.btn.btn-primary.dropdown-toggle.dropdown-toggle-split(type='button', data-toggle='dropdown')
                        span.caret
                      .dropdown-menu
                        a.dropdown-item(href='#') Action
                        a.dropdown-item(href='#') Another action
                        a.dropdown-item(href='#') Something else here
                        .dropdown-divider(role='separator')
                        a.dropdown-item(href='#') Separated link
                    input#input3-group3.form-control(type='text', name='input3-group3', placeholder='..')
                    .input-group-append
                      button.btn.btn-primary.dropdown-toggle(type='button', data-toggle='dropdown')
                        span.caret
                      .dropdown-menu.dropdown-menu-right
                        a.dropdown-item(href='#') Action
                        a.dropdown-item(href='#') Another action
                        a.dropdown-item(href='#') Something else here
                        .dropdown-divider(role='separator')
                        a.dropdown-item(href='#') Separated link
          .card-footer
            button.btn.btn-sm.btn-success(type='submit')
              i.fa.fa-dot-circle-o
              |  Submit
            button.btn.btn-sm.btn-danger(type='reset')
              i.fa.fa-ban
              |  Reset
    .row
      .col-md-6
        .card
          .card-header
            | Use the grid for big devices!
            small
              code .col-lg-*
              code .col-md-*
              code .col-sm-*
          .card-body
            form.form-horizontal(action='', method='post')
              .form-group.row
                .col-md-8
                  input.form-control(type='text', placeholder='.col-md-8')
                .col-md-4
                  input.form-control(type='text', placeholder='.col-md-4')
              .form-group.row
                .col-md-7
                  input.form-control(type='text', placeholder='.col-md-7')
                .col-md-5
                  input.form-control(type='text', placeholder='.col-md-5')
              .form-group.row
                .col-md-6
                  input.form-control(type='text', placeholder='.col-md-6')
                .col-md-6
                  input.form-control(type='text', placeholder='.col-md-6')
              .form-group.row
                .col-md-5
                  input.form-control(type='text', placeholder='.col-md-5')
                .col-md-7
                  input.form-control(type='text', placeholder='.col-md-7')
              .form-group.row
                .col-md-4
                  input.form-control(type='text', placeholder='.col-md-4')
                .col-md-8
                  input.form-control(type='text', placeholder='.col-md-8')
          .card-footer
            button.btn.btn-sm.btn-primary(type='submit') Action
            button.btn.btn-sm.btn-danger(type='button') Action
            button.btn.btn-sm.btn-warning(type='button') Action
            button.btn.btn-sm.btn-info(type='button') Action
            button.btn.btn-sm.btn-success(type='button') Action
      .col-md-6
        .card
          .card-header
            | Input Grid for small devices!
            small
              code .col-*
          .card-body
            form.form-horizontal(action='', method='post')
              .form-group.row
                .col-4
                  input.form-control(type='text', placeholder='.col-4')
                .col-8
                  input.form-control(type='text', placeholder='.col-8')
              .form-group.row
                .col-5
                  input.form-control(type='text', placeholder='.col-5')
                .col-7
                  input.form-control(type='text', placeholder='.col-7')
              .form-group.row
                .col-6
                  input.form-control(type='text', placeholder='.col-6')
                .col-6
                  input.form-control(type='text', placeholder='.col-6')
              .form-group.row
                .col-7
                  input.form-control(type='text', placeholder='.col-5')
                .col-5
                  input.form-control(type='text', placeholder='.col-5')
              .form-group.row
                .col-8
                  input.form-control(type='text', placeholder='.col-8')
                .col-4
                  input.form-control(type='text', placeholder='.col-4')
          .card-footer
            button.btn.btn-sm.btn-primary(type='submit') Action
            button.btn.btn-sm.btn-danger(type='button') Action
            button.btn.btn-sm.btn-warning(type='button') Action
            button.btn.btn-sm.btn-info(type='button') Action
            button.btn.btn-sm.btn-success(type='button') Action
    .row
      .col-sm-4
        .card
          .card-header
            | Example Form
          .card-body
            form(action='', method='post')
              .form-group
                .input-group
                  .input-group-prepend
                    span.input-group-text Username
                  input#username3.form-control(type='text', name='username3')
                  .input-group-append
                    span.input-group-text
                      i.fa.fa-user
              .form-group
                .input-group
                  .input-group-prepend
                    span.input-group-text Email
                  input#email3.form-control(type='email', name='email3')
                  .input-group-append
                    span.input-group-text
                      i.fa.fa-envelope
              .form-group
                .input-group
                  .input-group-prepend
                    span.input-group-text Password
                  input#password3.form-control(type='password', name='password3')
                  .input-group-append
                    span.input-group-text
                      i.fa.fa-asterisk
              .form-group.form-actions
                button.btn.btn-sm.btn-primary(type='submit') Submit
      .col-sm-4
        .card
          .card-header
            | Example Form
          .card-body
            form(action='', method='post')
              .form-group
                .input-group
                  input#username2.form-control(type='text', name='username2', placeholder='Username')
                  .input-group-append
                    span.input-group-text
                      i.fa.fa-user
              .form-group
                .input-group
                  input#email2.form-control(type='email', name='email2', placeholder='Email')
                  .input-group-append
                    span.input-group-text
                      i.fa.fa-envelope
              .form-group
                .input-group
                  input#password2.form-control(type='password', name='password2', placeholder='Password')
                  .input-group-append
                    span.input-group-text
                      i.fa.fa-asterisk
              .form-group.form-actions
                button.btn.btn-sm.btn-secondary(type='submit') Submit
      .col-sm-4
        .card
          .card-header
            | Example Form
          .card-body
            form(action='', method='post')
              .form-group
                .input-group
                  .input-group-prepend
                    span.input-group-text
                      i.fa.fa-user
                  input#username.form-control(type='text', name='username', placeholder='Username')
              .form-group
                .input-group
                  .input-group-prepend
                    span.input-group-text
                      i.fa.fa-envelope
                  input#email.form-control(type='email', name='email', placeholder='Email')
              .form-group
                .input-group
                  .input-group-prepend
                    span.input-group-text
                      i.fa.fa-asterisk
                  input#password.form-control(type='password', name='password', placeholder='Password')
              .form-group.form-actions
                button.btn.btn-sm.btn-success(type='submit') Submit
    // /.row
    .row
      .col-lg-12
        .card
          .card-header
            i.fa.fa-edit
            | Form Elements
          .card-body
            form.form-horizontal
              .form-group
                label.col-form-label(for='prependedInput') Prepended text
                .controls
                  .input-prepend.input-group
                    .input-group-prepend
                      span.input-group-text @
                    input#prependedInput.form-control(size='16', type='text')
                  p.help-block Here's some help text
              .form-group
                label.col-form-label(for='appendedInput') Appended text
                .controls
                  .input-group
                    input#appendedInput.form-control(size='16', type='text')
                    .input-group-append
                      span.input-group-text .00
                  span.help-block Here's more help text
              .form-group
                label.col-form-label(for='appendedPrependedInput') Append and prepend
                .controls
                  .input-prepend.input-group
                    .input-group-prepend
                      span.input-group-text $
                    input#appendedPrependedInput.form-control(size='16', type='text')
                    .input-group-append
                      span.input-group-text .00
              .form-group
                label.col-form-label(for='appendedInputButton') Append with button
                .controls
                  .input-group
                    input#appendedInputButton.form-control(size='16', type='text')
                    span.input-group-append
                      button.btn.btn-secondary(type='button') Go!
              .form-group
                label.col-form-label(for='appendedInputButtons') Two-button append
                .controls
                  .input-group
                    input#appendedInputButtons.form-control(size='16', type='text')
                    span.input-group-append
                      button.btn.btn-secondary(type='button') Search
                      button.btn.btn-secondary(type='button') Options
              .form-actions
                button.btn.btn-primary(type='submit') Save changes
                button.btn.btn-secondary(type='button') Cancel
      // /.col
    // /.row
